<template>
	<view>
		<view class="VerticalBox" :style="[{height:'calc(100vh - ' + CustomBar + 'rpx)'}]">
			<scroll-view :class="['VerticalNav nav',BackGroundBox]" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
			 v-if="leftisShow">
				<block v-for="(item,index) in list" :key="index">
					<view v-if="item.isShow" class="cu-item text-red" :class="index==tabCur?'text-green cur':''" 
					 @tap="TabSelect" :data-id="index">
						{{item.name}}
					</view>
				</block>
			</scroll-view>
			<scroll-view :class="['VerticalMain',BackGround]" scroll-y scroll-x scroll-with-animation :scroll-into-view="'main-'+mainCur"
			 @scroll="VerticalMain">
				<block v-for="(item,index) in list" :key="index">
					<view v-if="item.isShow" class="padding-top padding-lr" :id="'main-'+index">
						<view :class="['cu-bar solid-bottom bg-white',BackGroundBox]" style="color: #888888;">
							<view class="action">
								<text class="cuIcon-title text-green"></text>{{item.name}}
							</view>
						</view>
						<view v-if="isShow" class="cu-list grid" :class="['col-' + gridCol,BackGroundBox]">
							<view class="cu-item" v-if="info.isShow" v-for="(info,infoindex) in item.Children" :key="infoindex" @longpress.stop="longtap($event,info)" @tap="jumpArchives(index,infoindex)">
								<image class="myimg" :src="info.img"></image>
								<text>{{info.name}}</text>
							</view>
						</view>
						<view v-else>

						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "ScrollDome",
		data() {
			return {
				CustomBar: this.CustomBar,
				gridCol: uni.getStorageSync('gridCol') || 3,
				gridBorder: uni.getStorageSync('gridBorder') || false,
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true
			}
		},
		props: {
			list: Array,
			default: [],
			isShow: {
				type: Boolean,
				default: true
			},
			leftisShow: {
				type: Boolean,
				default: false,
			}
		},
		computed: {
			...mapGetters([
				'BackGround', 'BackGroundBox'
			])
		},
		methods: {
			jumpArchives(index, infoindex) {
				this.$emit('jumpArchives', {
					index,
					infoindex
				})
			},
			longtap(e,info) {
				console.log(e);
				this.$emit('zylongtap',e,info)
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().in(this).select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						return false
					}
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
